<template>
  <div class="top-filter-bar" :class="{'fixed':fixed}">
    <div class="top-filter-main">
      <div class="top-filter-body">
        <div class="filter-column bdr" v-for="(filter, index) in filterOptions" :class="filter.class" @click="showOption(filter, index)">
          <span class="filter-column-text">{{ filter.title }}</span>
          <i class="up-ico" v-if="activeIndex !== index"></i>
          <i class="down-ico" v-if="activeIndex === index"></i>
        </div>
      </div>
      <dropdown-option v-if="optionsListObject && isShowCover" :options-list-object="optionsListObject" @change-filter="changeFilterValue"></dropdown-option>
    </div>
  </div>
</template>

<script>

  import dropdownOption from '../components/dropdown-option';
  import { SHOW_COVER, HIDE_COVER } from '../store/mutation-types';

  export default {

   props: {
    filterOptions: {
      type : Array,
      require: true
    },

    fixed:{
      type:Boolean,
      require: false,
      default: true
    }
   },
   data() {
     return {
       activeIndex: false,
       isHideShowCover: true,
       optionsListObject:'',
       optionsListValues: [],
       dateOptions : [
         {
           text : '今年',
           value : '1'
         },
         {
           text : '去年',
           value : '2'
         },
         {
           text : '本季度',
           value : '3'
         },
         {
           text : '上季度',
           value : '4'
         },
         {
           text : '本月',
           value : '5'
         },
         {
           text : '上月',
           value : '6'
         },
         {
           text : '本周',
           value : '7'
         },
         {
           text : '上月',
           value : '8'
         },
         {
           text : '今天',
           value : '9'
         },
         {
           text : '昨天',
           value : '10'
         },
         ],
         peopleOptions:  [
         {
           text : '仅自己',
           value : '1'
         },
       ]
     }

   },
   components : {
     dropdownOption
   },

   methods: {
    showOption(optionsListObject, index) {

      if(this.activeIndex === index) {

        if(this.optionsListObject === optionsListObject) {
            this.optionsListObject = ''
        }
        this.activeIndex = false
        this.$store.commit(HIDE_COVER);//关闭遮盖层
      } else {
         if(optionsListObject.options) {
           this.optionsListObject = optionsListObject;
           this.$store.commit(SHOW_COVER);//关闭遮盖层
         } else {
           this.optionsListObject = ''
           this.$store.commit(HIDE_COVER);//关闭遮盖层
         }
         this.activeIndex = index
      }

      console.log('222', index,  this.activeIndex)
      this.$emit('item-selected', optionsListObject, index);
    },

     changeFilterValue(optionsListObject){
        this.filterOptions[this.activeIndex] = optionsListObject;
        this.$emit('change-filter', this.filterOptions);
     },

     mparseInt(numeric) {
       let value = parseInt(numeric)
       console.log(value, 'parseInt', numeric)
       return value
     },

     whichShow(filter, index) {
       let showType = ''

       if(filter.options || filter.showArrow) {
         if(this.activeIndex !== index) {
           showType = 'up'
         } else {
           showType ='down'
         }
       } else {
         showType ='none'
       }
       console.log(showType)
       return showType
     }
   },

   watch:{

    isShowCover(value){

    },

    optionsListObject(value){

    },

     optionsListValues(optionsListValues){
      console.log(optionsListValues, 'optionsListValues')
     }
   },

   computed:{
     isShowCover () {
     return this.$store.state.app.isShowCover;
     }
   },

   mounted () {
     this.isHideShowCover = !this.$store.state.app.isShowCover;
   }

  }
</script>

<style lang="less">
  @import '../less/index.less';

  .top-filter-bar{

    &:not(.fixed) {
      position: absolute;
    }

    &.fixed {
      position: fixed;
    }

    top:0;
    left:0;
    z-index: 102;
    width: 100%;
    background-color: white;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none; user-select:none;

    .up-ico {
      display: inline-block;
      background: url("@{host}/img/up-ico.png") no-repeat 0 0;
      width: 10px;
      height: 10px;
      background-size: 100%;
    }

    .down-ico{
      display: inline-block;
      background: url("@{host}/img/down-ico.png") no-repeat 0 0;
      width: 10px;
      height: 10px;
      background-size: 100%;
      vertical-align: bottom;
      margin-bottom: 11px;
    }


    .top-filter-body{
      position: relative;
      width: 100%;
      display: table;

      height: @top-filter-size;
      line-height: @top-filter-size;
      border-bottom: 1px solid #EDEDED;
    }

    .filter-column {
    table-layout: fixed;
    display: table-cell;

    &.txt-indent{
      text-indent: 18px;
    }

    &.txt-center{
      text-align: center;
    }

     &.bdr{
      border-right: 1px solid #EDEDED;
     }

     &.width-20{
       width: 22%;
     }

     &.width-25{
       width: 25%;
     }
    }

  }
</style>
